<template>
  <div id="home" class="home">
    <!-- 头部 -->
    <div class="header">
      <router-link class="pto" to="/login"
        ><i class="iconfont user">&#xe606;</i></router-link
      >
      <router-link class="to-serch" to="/search">
        <img class="serch" src="../assets/img/ser.png" alt="" />
        <span>电商年货节</span>
      </router-link>
      <i class="iconfont code">&#xe684;</i>
      <i class="iconfont message">&#xe66d;</i>
    </div>
       <div class="main">
            <!-- 轮播 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="../assets/img/banner-one.jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="../assets/img/banner.png" alt="">
                </van-swipe-item>
            </van-swipe>
            <!-- 分类 -->
            <div class="cation1">
                <div class="cation1-div-a">
                    <a>
                        <img src="../assets/img/list1.jpg" alt="">
                        <span>溯源家禽</span>
                    </a>
                    <a>
                        <img src="../assets/img/list2.png" alt="">
                        <span>电商扶贫</span>
                    </a>
                    <a>
                        <img src="../assets/img/list3.png" alt="">
                        <span>店铺街</span>
                    </a>
                    <a>
                        <img src="../assets/img/list4.png" alt="">
                        <span>农业服务</span>
                    </a>
                    <a>
                        <img src="../assets/img/list5.png" alt="">
                        <span>产品咨询</span>
                    </a>
                </div>
                <div class="cation2">
                    <div class="cation2-div-a">
                         <router-link :to="'/foodclassify/'+'2c9f69ee70a909c40170a9a91eac0008'">
                            <img src="../assets/img/list6.png" alt="">
                            <span>品牌特产</span>
                         </router-link>
                        <router-link :to="'/foodclassify/'+'2c90bd117110e504017111024c97000e'">
                            <img src="../assets/img/list7.png" alt="">
                            <span>水果蔬菜</span>
                        </router-link>
                        <router-link :to="'/foodclassify/'+'2c90bd1170bd47f50170bdecb1770008'">
                            <img src="../assets/img/list8.png" alt="">
                            <span>肉质蛋品</span>
                        </router-link>
                        <router-link :to="'/foodclassify/'+'2c90bd1170bd47f50170bdf28962000b'">
                            <img src="../assets/img/list9.png" alt="">
                            <span>特色水产</span>
                        </router-link>
                        <router-link :to="'/foodclassify/'+'2c90bd1170bd47f50170bdf44675000f'">
                            <img src="../assets/img/list10.png" alt="">
                            <span>农特产品</span>
                        </router-link>
                        <router-link :to="'/foodclassify/'+'2c90bd1170bd47f50170bdf6af430014'">
                            <img src="../assets/img/list11.png" alt="">
                            <span>粮油调味</span>
                        </router-link>
                        <router-link :to="'/foodclassify/'+'2c90bd1170cd200c0170cd8f54510004'">
                            <img src="../assets/img/list12.png" alt="">
                            <span>日用生活</span>
                        </router-link>
                        <a>
                            <img src="../assets/img/list13.png" alt="">
                            <span>活动展览</span>
                        </a>
                        <a>
                            <img src="../assets/img/list14.png" alt="">
                            <span>优惠劵</span>
                        </a>
                        <a>
                            <img src="../assets/img/list15.png" alt="">
                            <span>全部分类</span>
                        </a>
      </div>
      <!-- 内容 -->
      <div class="section1">
        <a><img src="../assets/img/section1.jpg" alt="" /></a>
        <a><img src="../assets/img/section2.jpg" alt="" /></a>
      </div>
      <!-- 特产商品 -->
      <div class="section2">
        <h1>特产商品</h1>
        <router-link
          class="box"
          v-for="item in Mall"
          :key="item.id"
          :to="'/detail/' + item.id"
        >
          <img :src="imgs + item.specialtyImage" alt="" />
        </router-link>
      </div>
      <!-- 新品上市 -->
      <div class="section3">
        <h1>新品上市</h1>
        <div class="sec5-div-dd">
          <div class="spanlist">
            <router-link
             class="newpro"
              v-for="item in ProductNewList"
              :key="item.id"
              :to="'/detail/' + item.id"
            >
              <div class="sec3-div-img">
                <img
                  :src="imgs + item.iconImg"
                  style="width: 0.8rem; height: 0.8rem"
                />
              </div>
              <p>{{ item.name }}</p>
              <span>{{ item.marketPrice }}元</span>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="section4">
        <div
          class="classification"
          v-for="(item, index) in Product"
          :key="item.id"
        >
          <div class="ify-img">
            <img :src="imgs + item.indexLeftImg" alt="" />
          </div>
          <div class="ify-content">
            <div
              class="content-list"
              v-for="(ite, idx) in Product[index].products"
              :key="ite.id"
            >
              <img
                :src="imgs + Product[index].products[idx].iconImg"
                alt=""
                class="pro"
              />
              <router-link 
                :to="'/detail/' + ite.id"
                class="van-multi-ellipsis--l2 list-tit"
              >
                <img src="../assets/img/zy.png" alt="" />
                {{ ite.name }}
              </router-link>
              <div class="list-pro">
                ￥<span>{{ ite.nowPrice }}</span>
              </div>
              <div class="nums" @click="handleDetail(ite.id)">
                <i class="van-icon van-icon-add iconfont">&#xe70f;</i>
              </div>
              <div
                data-v-40f4caea=""
                v-for="(itm, idd) in gooddetail"
                :key="idd"
                class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-sku-container"
                v-show="isShow"
              >
                <div class="van-sku-header van-hairline--bottom">
                  <div class="van-image van-sku-header__img-wrap">
                    <img
                      :src="imgs + itm.iconImg"
                      class="van-image__img"
                      style="object-fit: cover"
                    />
                  </div>
                  <div class="van-sku-header__goods-info">
                    <div class="van-sku__goods-price">
                      <span class="van-sku__price-symbol">￥</span
                      ><span class="van-sku__price-num">{{itm.nowPrice}}</span>
                    </div>
                    <div class="van-sku-header-item">
                      <span class="van-sku__stock"
                        >剩余
                        <span class="van-sku__stock-num">{{itm.sort}}</span>
                        件</span
                      >
                    </div>
                    <div class="van-sku-header-item">请选择 规格</div>
                  </div>
                </div>
                <div class="van-sku-body" style="max-height: 467px">
                  <div class="van-sku-group-container">
                    <div class="van-sku-row van-hairline--bottom">
                      <div class="van-sku-row__title">规格</div>
                      <span
                        class="van-sku-row__item van-sku-row__item--disabled"
                        ><div class="van-image van-sku-row__item-img">
                          <img
                            src="https://caiba-produce.oss-cn-beijing.aliyuncs.com//static/upload/3dbcde56e760e7312068c0e0894d076c/hotel/20210414/3cfb1ce68d7a48e1b6d576566e6c2171.png"
                            class="van-image__img"
                            style="object-fit: cover"
                          />
                        </div>
                        <div class="van-sku-row__item-name">件</div></span
                      >
                    </div>
                  </div>
                  <div class="van-sku-stepper-stock">
                    <div class="van-sku__stepper-title">购买数量</div>
                    <div class="van-stepper van-sku__stepper">
                      <button
                        type="button"
                        class="van-stepper__minus van-stepper__minus--disabled"
                      ></button
                      ><input
                        type="tel"
                        role="spinbutton"
                        inputmode="numeric"
                        aria-valuemax="10000000"
                        aria-valuemin="1"
                        aria-valuenow="1"
                        class="van-stepper__input"
                      /><button
                        type="button"
                        class="van-stepper__plus"
                      ></button>
                    </div>
                  </div>
                  <div class="van-sku-messages"></div>
                </div>
                <div class="van-sku-actions">
                  <button
                    class="van-button van-button--warning van-button--large"
                    @click="handleAdd(itm.id)"
                  >
                    <div class="van-button__content">
                      <span class="van-button__text">加入购物车</span>
                    </div></button
                  ><button
                    class="van-button van-button--danger van-button--large"
                  >
                    <div class="van-button__content">
                      <span class="van-button__text">立即购买</span>
                    </div>
                  </button>
                </div>
                <i
                  role="button"
                  tabindex="0"
                  class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right"
                  @click="handleShow"
                  ><!----></i
                >
              </div>
            </div>
          </div>
          <div class="ify-more">查看更多&nbsp;&nbsp;>&nbsp;&nbsp;></div>
        </div>
        <p class="ends">到底了哦...</p>
      </div>
    </div>
    </div>
       </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import request from "../utils/request.js";
import Footer from "../components/Footer.vue";
export default {
  data() {
    return {
      isShow: false,
      num: 0,
      Product: [],
      Mall: [],
      ProductNewList: [],
      imgs: "https://caiba-produce.oss-cn-beijing.aliyuncs.com//",
    };
  },
  components: {
    Footer,
  },
  computed: {
    gooddetail() {
      return this.$store.state.good.gooddetail;
    },
  },
  methods: {
    handleDetail(idx) {
      this.isShow = !this.isShow;
      for (let j = 0; j < this.Product.length; j++) {
        for (let i = 0; i < this.Product[j].products.length; i++) {
          if (idx == this.Product[j].products[i].id) {          
            var good = this.Product[j].products[i];
            
          }
         
        }
      }
      
      // this.$set(gooddetail, "num", 1);
      this.$store.commit("good/goodDetailMut", good);
    },
    handleAdd(index) {
      console.log(index);
      this.isShow = !this.isShow;
      for (let j = 0; j < this.Product.length; j++) {
        for (let i = 0; i < this.Product[j].products.length; i++) {
          if (index == this.Product[j].products[i].id) {
            var good = this.Product[j].products[i];
          }
        }
      }
      this.$set(good, "num", 1);
      this.$store.commit("good/goodAddMut", good);
      console.log(1);
    },
    handleShow(index) {
      for (let j = 0; j < this.Product.length; j++) {
        for (let i = 0; i < this.Product[j].products.length; i++) {
          if (index == this.Product[j].products[i].id) {
            var good = this.Product[j].products[i];
          }
        }
      }
      this.isShow = !this.isShow;
    },
  },
  created() {
    request
      .get("/gct/web/front/index/productList?pageSize=10&pageNo=1")
      .then((res) => {
        this.Product = res.data.data;
      }),
      request.get("/gct/web/mall/specialty/getList").then((res) => {
        this.Mall = res.data.data;
      }),
      request.get("/gct/web/mall/specialty/getNewProductList").then((res) => {
        this.ProductNewList = res.data.data;
      });
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/home.css");
@import url("../assets/css/reset.css");
@import url("../assets/font/iconfont.css");
.my-swipe {
  overflow: hidden;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  float: left;
  height: 1.16rem;
}
.van-popup--bottom.van-popup--round {
  border-radius: 16px 16px 0 0;
  position: fixed;
  bottom: 50px;
}
</style>
